<%--
  Created by IntelliJ IDEA.
  User: 30822
  Date: 2023/6/1
  Time: 21:28
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <script src="${pageContext.request.contextPath}/js/jquery.js"></script>
    <script>
        <%--        页面加载完成就调用这个方法--%>
        $(function (){
            $.ajax({
                type:"post",
                url:"${pageContext.request.contextPath}/user/getRoleList",
                dataType:"json",
                //这里的data是controller拿到的集合
                success:function (data){
                    var option="";
                    $.each(data,function (i,n){
                        option+="<option value="+n.id+">"+n.name+"</option>";
                    })
                    //    $("role")id选择器，将option语句放入
                    $("#role").append(option);
                }
            })
        })
    </script>
    <script>
        function change(){
            var img = document.getElementById("img");

            img.src = "${pageContext.request.contextPath}/getVerifyCode?time="+new Date();
        }
        function toRegister(){
            window.location.href="${pageContext.request.contextPath}/user/toRegister";
        }

        // 获取提交按钮和表单元素

    </script>
    <style>
        body{
            background:url(../img/img_2.png) no-repeat center top;
            background-size:cover;
            background-attachment:fixed;
        }
    </style>
</head>
<body>
<div style="margin-top: 200px;margin-left: 500px;border: 1px solid #000; width:372px;padding-left: 20px " >
<h1>用户注册</h1>
<%--    <br/><br/>--%>
    <a href="${pageContext.request.contextPath}/user/login" style="margin-top: 10px">
    <button style="margin-top: -12px;margin-bottom: 10px">返回登入</button>
    </a>
<form action="${pageContext.request.contextPath}/user/register" method="post" id="myForm">

    <label>用户名：</label>
    <input type="text" name="userName" /><br/><br/>
    <label>密&nbsp;&nbsp;&nbsp;码：</label>
    <input type="password" name="userPwd" /><br/><br/>
    <label>角&nbsp;&nbsp;&nbsp;色：</label>
    <select id="role" name="roleId">
        <option value="0">请选择角色</option>
    </select>
<%--    <div style="display: flex; flex-direction: row">--%>
<%--    <label>验证码：</label>--%>
<%--    <input  width="177px" height="21px" type="password" name="verityCode"/><br/><br/>--%>
<%--    <a href="javascript:change()">--%>
<%--        <img style="margin-left: 10px" id="img" width="100px" src="${pageContext.request.contextPath}/getVerifyCode">--%>
<%--    </a>--%>
<%--    </div>--%>
    <div style="margin-left: -4px;margin-bottom: 17px">
    <label>
        <input type="radio" name="gender" value="男" style="margin-top: 20px">
        男
    </label>
    <label>
        <input type="radio" name="gender" value="女">
        女
    </label>
</div>
    <div style="display: flex; flex-direction: row">
        <label>验证码：</label>
        <input  width="177px" height="21px" type="password" name="verityCode"/><br/><br/>
        <a href="javascript:change()">
            <img style="margin-left: 10px" id="img" width="100px" src="${pageContext.request.contextPath}/getVerifyCode">
        </a>
    </div>
    <br/><br/>
    <div style="text-align: center;margin-left: -57px;margin-top: -17px;margin-bottom: 10px" >
    <input type="submit" value="注册" id="myBtn" style="text-align: center; width: 97px;height:40px;" />
</div>

    <span style="color: red;margin-left: 99px; text-align: center" >${requestScope.msg}</span>
</form>
</div>
</body>
</html>
